<script setup lang='ts'>
  import { onMounted, reactive } from 'vue';
  import { pageType, tabsArr } from '@/pinia/getter';
  import { gopage } from '@/utils/public';
  import xmimg from '@/components/xmimg.vue';
  import tabsList from '@/components/tabsList.vue';
  import ranking from './components/ranking/index.vue';
  import floor from './components/floor/index.vue';
  import message from './components/message/index.vue';
  import taskList from './components/taskList/index.vue';
  const action = reactive({
     
  })
  onMounted(()=>{
    
  })
</script>
<template>
  <div class="content">
    <xmimg @click="gopage('/ruletext')" src="ruleImageBut.png" class="ruleImageBut" />
    <tabsList v-model:tabs-key="pageType" :tabs="tabsArr" />
    <ranking v-if="pageType == 1" />
    <floor v-if="pageType == 2" />
    <message v-if="pageType == 3" />
    <taskList v-if="pageType == 4" />
  </div>
</template>

<style lang='scss' scoped>
  .content {
    width: 100vw;
    min-height: 100vh;
    padding: 267px 0 0;
    background: var(--contBackColor) var(--bannerImage) left top / 100% 340px no-repeat;
    .ruleImageBut {
      width: 66px;
      height: 30px;
      margin: 0 0 var(--ruleButMarginBottm) auto;
    }
  }
</style>